<template>
  <div class="uploadImg_new">
    <div class="tips">为保障账户及资金安全，请填写真实有效的身份信息</div>
    <div class="uploadimg">
    <div class="left same">
        <div v-show="sfzload=='LOADING'">
          <div class="identity loadTb"></div>
          <span>身份证正面</span>
        </div>
        <div v-show="sfzload=='AFTERLOAD'">
          <div class="identity">
            <img :src="sfzimg" alt="" style="width:100%;height:100%;">
          </div>
          <span>身份证正面</span>
        </div>
        <van-uploader v-show="sfzload=='BEFORELOAD'" :max-count="1" :after-read="afterReadSfz" :before-read="beforeReadSfz">
          <div class="identity zm"></div>
				  <span>身份证正面</span>
        </van-uploader>
      </div>
      <div class="right same">
        <div v-show="tbload=='LOADING'">
          <div class="identity loadTb"></div>
          <span>淘宝淘气值</span>
        </div>
        <div v-show="tbload=='AFTERLOAD'">
          <div class="identity">
            <img :src="tbimg" alt="" style="width:100%;height:100%;">
          </div>
          <span>淘宝淘气值</span>
        </div>
        <van-uploader v-show="tbload=='BEFORELOAD'" :max-count="1" :after-read="afterReadTb"
                      :before-read="beforeReadTb">
          <div class="identity bm"></div>
          <span>淘宝淘气值</span>
        </van-uploader>
      </div>
    </div>
    <div class="content">
      <van-field v-model="usernumber" readonly label="身份证号" placeholder="校验获取"/>
      <van-field v-model="username" readonly label="姓名" placeholder="校验获取"/>
      <van-field v-model="usernumber" readonly center clearable label="身份证号" placeholder="校验获取">
      </van-field>
      <van-field v-model="userbirth" readonly label="身份证生日" placeholder="校验获取"/>
      <van-field v-model="useraddress" readonly label="身份证地址" placeholder="校验获取"/>
      <van-field v-model="userzfb" label="支付宝帐号" placeholder="请输入支付宝帐号"/>
      <van-field readonly clickable name="picker" :value="userjob" label="职业" placeholder="请选择职业"
                 @click="showPicker = true"/>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker show-toolbar :columns="columns" @confirm="onJobs" @cancel="showPicker = false"/>
      </van-popup>
      <van-field v-model="usertbname" label="淘宝会员名" placeholder="请输入淘宝会员名"/>
      <van-field v-model="usernaughty" type="digit" label="淘宝淘气值" placeholder="请输入淘宝淘气值"/>
      <van-field v-model="usercode" label="邀请码" placeholder="请输入邀请码"/>
      <van-field v-model="userpass" type="password" label="操作密码" placeholder="操作密码(涉及金钱等)"/>
      <van-field v-model="userphone" type="tel" label="手机号" placeholder="请输入手机号"/>
      <van-field v-model="usersms" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <van-button slot="button" size="small" type="info" :disabled="disabled" @click="onMessage">{{btnTitle}}
        </van-button>
      </van-field>
      <div class="submit">
        <van-button type="primary" block @click="onSubmit" color="#4b7ee9">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {imagerecognition, perfectuserinfo, sendcode, idcode_Info, authorize_login} from '../api/api';
  import aestool from '@/utils/aestool.js';
  import axios from 'axios';
  export default {
    data() {
      return {
        username: '',
        usernumber: '',
        userbirth: '',
        useraddress: '',
        userzfb: '',
        userphone: '',
        usersms: '',
        userjob: '',
        usertbname: '',
        usercode: '',
        usernaughty: '',
        userpass: '',
        sfzload: 'BEFORELOAD',
        tbload: 'BEFORELOAD',
        sfzimg: '',
        tbimg: '',
        btnTitle: "获取验证码",
        disabled: false,
        columns: ['学生', '自由职业', '待业', '家庭主妇', '工薪族', '务农', '管理人才', '技术人才', '工人', '宝妈', '销售', '客服', '工程', '个体户', '会计', '文员', '检验员', '其他'],
        showPicker: false,
        btnload: false,
      }
    },
    created() {
      sessionStorage.setItem('usercode', this.$route.query.usercode)
      // var a = aestool.encrypt('欢迎登陆','qwe1asd2zxc3')
      // var b = aestool.decrypt(a,'qwe1asd2zxc3')
      // console.log('加密后',a)
      // console.log('解密后',b)
      this.onDetail()
      this.usercode = sessionStorage.getItem('usercode')
    },
    methods: {
      onDetail() {
        if (!sessionStorage.getItem('token')) {
          if (this.$route.query.token) {
            let token = this.$route.query.token
            sessionStorage.setItem('token', token)
          } else {
            // let link = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfe135cea133d9bcb&redirect_uri=http%3a%2f%2fxfq.gjxhlm.com%2fapi%2fregister%2fAuthorization&response_type=code&scope=snsapi_userinfo&state=1'
            // window.location.href = link
            let str = this.getNum()
            let params = {
              queuedata: aestool.encrypt('login_begin', str),
              queuedata_s: aestool.encrypt(str, '123456asdzxlogin'),
            }
            authorize_login(params).then(res => {
              this.bgshow = false
              if (res.Status == 200) {
                let link = aestool.decrypt(res.Data, 'Login81432258700')
                console.log('授权', link)
                window.location.href = link
              } else {
                this.bgshow = true
              }
            }).catch(res => {
              this.bgshow = true
            })
          }
        }
      },
      getNum() {
        var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        var nums = ""
        for (var i = 0; i < 16; i++) {
          var id = parseInt(Math.random() * 61);
          nums += chars[id];
        }
        return nums
      },
      onJobs(value) {
        this.userjob = value;
        this.showPicker = false;
      },
      //身份证校验
      onCheck() {
        if (this.username == '') {
          this.$toast('姓名不能为空！')
        } else if (this.usernumber == '') {
          this.$toast('身份证号不能为空！')
        } else {
          this.btnload = true
          let params = {
            username: aestool.encrypt(this.username, 'IdcodeInfo265506'),
            card_number: aestool.encrypt(this.usernumber, 'IdcodeInfo265506')
          }
          idcode_Info(params).then(res => {
            console.log('校验', res)
            this.btnload = false
            if (res.Status == 200) {
              this.userbirth = res.Data.birthday
              this.useraddress = res.Data.area
            }
          })
        }
      },
      //身份证上传之前
      beforeReadSfz(file) {
        console.log('file', file)
        if (file.type.indexOf("image") == -1) {
          this.$toast('请上传正确的图片格式');
          return false;
        }
        return true;
      },
      //淘宝值上传之前
      beforeReadTb(file) {
        if (file.type.indexOf("image") == -1) {
          this.$toast('请上传正确的图片格式');
          return false;
        }
        return true;
      },
      //身份证上传
      afterReadSfz(file) {
        this.sfzload = 'LOADING'
        this.uploadsfz(file.file)
      },
      //淘宝值上传
      afterReadTb(file) {
        this.tbload = 'LOADING'
        this.uploadtb(file.file)
      },
      uploadsfz(file) {
        let params = new FormData()
        params.append('file', file)
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        return new Promise((resolve, reject) => {
          axios.post('api/v1/register/imagerecognition', params, config).then(res => {
            this.sfzload = 'AFTERLOAD'
            console.log('身份证', res)
            if (res.data.Status == 200) {
              this.$toast('上传成功')
              this.sfzimg = res.data.UrlImg
              this.username = res.data.Data.response.Name
              this.usernumber = res.data.Data.response.IdNum
              this.userbirth = res.data.Data.response.Birth
              this.useraddress = res.data.Data.response.Address
            } else {
              this.$toast(res.data.Message)
              this.sfzload = 'BEFORELOAD'
            }
          })
        })
      },
      uploadtb(file) {
        let params = new FormData()
        params.append('file', file)
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        return new Promise((resolve, reject) => {
          axios.post('api/v1/register/tbimageRecognition', params, config).then(res => {
            console.log('上传', res)
            this.tbload = 'AFTERLOAD'
            if (res.data.Status == 200) {
              this.$toast('上传成功')
              this.tbimg = res.data.UrlImg
              console.log('this.tbimg', this.tbimg)
            } else {
              this.$toast(res.data.Message)
              this.tbload = 'BEFORELOAD'
            }
          })
        })
      },
      onSubmit() {
        if (this.username == '') {
          this.$toast('姓名不能为空！')
        } else if (this.usernumber == '') {
          this.$toast('身份证号不能为空！')
        } else if (this.userbirth == '') {
          this.$toast('身份证生日不能为空！')
        } else if (this.useraddress == '') {
          this.$toast('身份证地址不能为空！')
        } else if (this.userzfb == '') {
          this.$toast('支付宝账号不能为空！')
        } else if (this.userphone == '') {
          this.$toast('手机号不能为空！')
        } else if (this.userjob == '') {
          this.$toast('职业不能为空！')
        } else if (this.usertbname == '') {
          this.$toast('淘宝会员名不能为空！')
        } else if (this.usercode == '') {
          this.$toast('邀请码不能为空！')
        } else if (this.usernaughty == '') {
          this.$toast('淘气值不能为空！')
        } else if (this.userpass == '') {
          this.$toast('操作密码不能为空！')
        } else if (this.tbzimg == '') {
          this.$toast('淘宝淘气值图片不能为空！')
        } else if (this.usersms == '') {
          this.$toast('短信验证码不能为空！')
        } else {
          let params = {
            Password: this.userpass,
            Invitation: this.usercode,
            Alpay: this.userzfb,
            Jobs: this.userjob,
            t_name: this.username,
            Idcard: this.usernumber,
            taobao_name: this.usertbname,
            Phone: this.userphone,
            code: this.usersms,
            birth: this.userbirth,
            address: this.useraddress,
            tb_value: Number(this.usernaughty),
            last_code: '1',
            tb_img: this.tbimg,
            idcode_img:this.sfzimg
          }
          perfectuserinfo(params).then(res => {
            if (res.Status == 200) {
              this.$toast('提交成功！')
              this.$router.push('/pic')
            } else {
              this.$toast(res.Message)
            }
          })
        }
      },
      //发送验证码
      onMessage() {
        //判断输入的手机号是否合法
        if (!this.userphone) {
          this.$toast("手机号码不能为空")
        } else if (!/^1[3456789]\d{9}$/.test(this.userphone)) {
          this.$toast("请输入正确的手机号")
        } else {
          //倒计时
          let time = 60;
          let timer = setInterval(() => {
            if (time == 0) {
              clearInterval(timer);
              this.disabled = false;
              this.btnTitle = "获取验证码";
            } else {
              this.btnTitle = time + '秒后重试';
              this.disabled = true;
              time--
            }
          }, 1000)
          let params = {
            phone: aestool.encrypt(this.userphone, '123456asdzxcqwe0')
          }
          sendcode(params).then(res => {
            console.log('验证码', res)
            if (res.Status == 200) {
              this.$toast('发送成功！')
            } else {
              this.$toast(res.Message)
            }
          })
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .uploadImg_new {
    height 100%
    font-size 12px

    .identity {
      width 100%
      height 120px
      margin-bottom 10px
    }

    .loadTb {
      background url(../assets/img/loading.gif) no-repeat top center
      background-size cover
    }

    .zm {
      background url(../../static/img/sfz_1.jpg) no-repeat top center
      background-size cover
    }

    .bm {
      background url(../../static/img/tqz.jpg) no-repeat top center
      background-size cover
    }

    .uploadimg {
      display flex
      justify-content space-around
      align-items center
      padding 20px 0
      background #f4f4f4

      .same {
        width 46%
        text-align center
        font-size 16px
        color #656565
      }
    }

    .tips {
      background #fcfbe9
      line-height 32px
      text-align center
      font-size 14px
      color #33322e
    }

    .submit {
      margin: 18px;
    }
  }
</style>
<style lang="stylus">
  .uploadImg
    width 100%

    .van-uploader
      width 100%

      .van-uploader__input-wrapper
        width 100%

  .van-uploader {
    width 180px
  }

  .van-uploader__input-wrapper {
    width 300px
  }
</style>

